<template>
  <div class="mod-index-img">
    <el-dialog :title="!dataForm.id ? this.$i18n.t('brand.add') : this.$i18n.t('brand.revise')" :visible.sync="visible"
               @close="closeDialogHandle" width="570px">
      <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="auto" size="small">

        <el-form-item label="博物馆名称" prop="museumName">
          <el-input size="small" v-model="dataForm.museumName" maxlength="20" show-word-limit></el-input>
        </el-form-item>

        <!-- 品牌logo -->
        <el-form-item label="博物馆Logo">
          <img-upload v-model="dataForm.museumImg"></img-upload>
        </el-form-item>

        <el-form-item label="博物馆背景图">
          <img-upload v-model="dataForm.museumBag"></img-upload>
        </el-form-item>

        <el-form-item label="博物馆简介">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="dataForm.detail">
          </el-input>
        </el-form-item>

        <el-form-item label="是否珍馆">
          <el-radio-group v-model="dataForm.isGem">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="default-btn" @click="visible = false">{{ $t('remindPop.cancel') }}</div>
        <div class="default-btn primary-btn" @click="dataFormSubmit()">{{ $t('remindPop.confirm') }}</div>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import ImgUpload from '@/components/img-upload'
  import {Debounce} from '@/utils/debounce'

  export default {
    data () {
      return {
        dataForm: {
          id: 0,
          museumName: '',
          museumImg: '',
          museumBag: '',
          detail: '',
          isGem: 0
        },
        brandSelectVisible: false,

        dataRule: {
          museumName: [
            {required: true, message: "请输入名称", trigger: 'blur'}
          ]
        },
        visible: false,
      }
    },
    components: {
      ImgUpload
    },
    methods: {
      // 获取分类数据
      init (id) {
        this.visible = true
        this.dataForm.id = id || 0
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
        })
        if (this.dataForm.id) {
          // 获取产品数据
          this.$http({
            url: this.$http.adornUrl(`/platform/museum/info/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            this.dataForm = data
            this.dataForm.isGem = parseInt(data.isGem)
          })
        }
      },

      // 表单提交
      dataFormSubmit: Debounce(function () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            let param = this.dataForm
            this.$http({
              url: this.$http.adornUrl(`/platform/museum`),
              method: param.id ? 'put' : 'post',
              data: this.$http.adornData(param)
            }).then(({data}) => {
              this.$message({
                message: this.$i18n.t('remindPop.success'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList', this.page)
                }
              })
            })
          }
        })
      }, 1500),
      // 关闭对话框回调
      closeDialogHandle () {
        this.$refs['dataForm'].resetFields()
        this.dataForm = {
          id: 0,
          museumName: '',
          museumImg: '',
          museumBag: '',
          detail: '',
          isGem: 0
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .el-input__inner {
    line-height: 1px !important;
  }

  .mod-index-img {
    .select-categoryId {
      width: 60%;
    }
  }
</style>
